import React, { useState } from "react";
import "./App.less";
import InputField from "@/App/InputField";
import TodoList from "@/App/TodoList";
import { Todo } from "@/model";

const App: React.FC = () => {
    const [todo, setTodo] = useState<string>("");
    const [todos, setTodos] = useState<Todo[]>([]);

    const handleAdd = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        if (todo) {
            setTodos([
                ...todos,
                {
                    id: Date.now(),
                    todo,
                    isDone: false,
                },
            ]);
            setTodo("");
        }
    };

    return (
        <div className="App">
            <span className="heading">Taskify</span>
            <InputField todo={todo} setTodo={setTodo} handleAdd={handleAdd} />
            <TodoList todos={todos} setTodos={setTodos} />
        </div>
    );
};

export default App;
